<template>
	<view class="empty-box" :style="{'padding-top': $xl.parseUnit(top, 'rpx'), 'padding-bottom': $xl.parseUnit(bottom, 'rpx')}">
		<image :src="iconImage" class="empty" :style="{width: $xl.parseUnit(imageWidth, 'rpx'), height: $xl.parseUnit(imageHeight, 'rpx')}"></image>
		<view class="info">{{desc}}</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'
	
	const typeText = {
		"data": "暂无数据~",
		"address": "暂无地址~",
		"car": "购物车空空如也~",
		"comment": "暂无评论~",
		"coupon": "暂无优惠券~",
		"equipment": "暂无设备~",
		"error": "出错了~",
		"goods": "暂无商品~",
		"history": "暂无历史记录~",
		"list": "暂无列表~",
		"loading": "努力加载中...",
		"maintain": "正在维护中...",
		"money": "暂无余额~",
		"network": "暂无网络~",
		"news": "暂无新闻~",
		"notice": "暂无通知~",
		"order": "暂无订单~",
		"permission": "暂无权限~",
		"points": "暂无积分~",
		"search": "暂无搜索结果~",
		"task": "暂无任务~",
		"404": "页面走丢了~",
		"500": "服务器出错了~",
	};
	// 传参
	const props = defineProps({
		type: {
			type: String,
			default: 'data'
		},
		text: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: '#888'
		},
		fontSize: {
			type: [String, Number],
			default: '28rpx'
		},
		image: {
			type: String,
			default: undefined
		},
		imageWidth: {
			type: [String, Number],
			default: '320rpx'
		},
		imageHeight: {
			type: [String, Number],
			default: '320rpx'
		},
		top: {
			type: [Number, String],
			default: 50
		},
		bottom: {
			type: [Number, String],
			default: 30
		}
	})
	// 提示文字
	const desc = computed(()=>{
		return props.text ? props.text : typeText[props.type];
	})
	// 文字大小
	const textSize = computed(()=>{
		return uni.$xl.parseUnit(props.fontSize, 'rpx');
	})
	// 提示图片
	const iconImage = computed(()=>{
		return props.image ? props.image : ('/uni_modules/xingluo-ui/static/imgs/empty/' + props.type + '.png');
	})
	
</script>

<style lang="scss" scoped>
	.empty-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.empty{
			margin-bottom: 20rpx;
		}
		.info{
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: v-bind(textSize);
			color: v-bind(color);
		}
	}
</style>